<template>
  <div>
    <el-card class="box-card">
      <el-form ref="truck" :model="truckCondition" label-width="80px" :inline="true">
        <el-form-item label="车辆类型:" prop="truckTypeId">
          <el-select v-model="truckCondition.truckTypeId" clearable placeholder="请选择">
            <el-option
              v-for="item in truckTypeData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码:" prop="licensePlate">
          <el-input type="text" placeholder="请输入车牌号码" v-model="truckCondition.licensePlate"></el-input>
        </el-form-item>
        <el-form-item label="车队名称:" prop="allowableVolume">
          <el-select v-model="truckCondition.fleetId" clearable placeholder="请选择">
            <el-option
              v-for="item in fleetData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="pageTruckType()" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="reset()" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card>
      <el-button type="info" icon="el-icon-edit" @click="openAddTruck()">新增车辆</el-button>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          width="120"
          label="序号">
          <template slot-scope="scop">
            <!--            queryVo.pageNum 当前页
                        queryVo.pageSize 页大小-->
            {{ scop.$index + (pagenum - 1) * pagesize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="车辆编号">
        </el-table-column>
        <el-table-column prop="truckName" label="车辆类型">
        </el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码">
        </el-table-column>
        <el-table-column prop="fleetName" label="所属车队">
        </el-table-column>
        <el-table-column prop="deviceGpsId" label="GPS设备ID">
        </el-table-column>
        <el-table-column prop="allowableLoad" label="准载重量(千克)">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="准载体积(方)">
        </el-table-column>
        <el-table-column prop="status" label="过期状态">
        </el-table-column>
        <el-table-column prop="transportTripsId" label="车次编号">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="findDetails(scope.row)">查看详情</el-button>
            <el-button style="color: red" type="text" size="medium" @click="remTruck(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagesum">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="添加车辆"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="form" :model="addTruckData" label-width="120px">
          <el-form-item label="* 车辆类型">
            <el-select v-model="addTruckData.truckTypeId" clearable placeholder="请选择">
              <el-option
                v-for="item in truckTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="* 车牌号码">
            <el-input v-model="addTruckData.licensePlate">
            </el-input>
          </el-form-item>
          <el-form-item label="* 所属车队">
            <el-select v-model="addTruckData.fleetId" clearable placeholder="请选择">
              <el-option
                v-for="item in fleetData"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="GPS设备ID">
            <el-input v-model="addTruckData.deviceGpsId">
            </el-input>
          </el-form-item>
          <el-form-item label="准载重量">
            <el-input v-model="addTruckData.allowableLoad">
              <template slot="append">千克</template>
            </el-input>
          </el-form-item>
          <el-form-item label="准载体积">
            <el-input v-model="addTruckData.allowableVolume">
              <template slot="append">千克</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="addTruck()">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import method from '../../../api/logisticsmanagement/transitcenter/truckManagement'

export default {
  name: "vehicleManagement",
  data() {
    return {
      //  当前页
      pagenum: 1,
      //  一页显示几条数据
      pagesize: 5,
      //  总页数
      pagesum: 0,
      //  查询出来的数据
      tableData: [],
      //  搜索条件
      truckCondition: {
        "truckTypeId": null,
        "licensePlate": null,
        "fleetId": null
      },
      //  所有车辆类型数据
      truckTypeData: [],
      //  所有车队数据
      fleetData: [],
      //  table的加载状态
      loading: false,
      //  添加对话框的状态
      dialogVisible: false,
      //  添加对话框的数据
      addTruckData: {
        "truckTypeId": "",
        "licensePlate": "",
        "fleetId": "",
        "deviceGpsId": "",
        "allowableLoad": "",
        "allowableVolume": "",
      }
    }
  },
  methods: {
    //  清除条件框
    reset() {

      this.truckCondition.truckTypeId = null
      this.truckCondition.licensePlate = null
      this.truckCondition.fleetId = null
    },
    //  查询所有车辆类型
    findTruckTypeAll() {
      method.selTruckTypeAll().then(({data}) => {
        this.truckTypeData = data.data
      })
    },
    //  查询所有车队
    findFleetAll() {
      method.selFleetAll().then(({data}) => {
        this.fleetData = data.data
      })
    },
    //  查询所有分页信息
    findPageTruck() {
      this.loading = true
      method.selTruckAll(this.pagenum, this.pagesize, this.truckCondition).then(({data}) => {
        this.tableData = data.data.records
        this.pagesum = data.data.total
        this.loading = false
      })
    },
    //  搜索
    pageTruckType() {
      this.findPageTruck()
    },
    //  设置一页显示多少数据
    setSize(val) {

      this.pagesize = val
      this.findPageTruck()
    },
    //  设置一页显示多少数据
    setPage(val) {

      this.pagenum = val
      this.findPageTruck()

    },
    //  打开添加车辆的对话框
    openAddTruck() {
      this.addTruckData = {}
      this.dialogVisible = true
    },
    //  添加车辆
    addTruck() {

      if (this.addTruckData.truckTypeId == "" || this.addTruckData.truckTypeId == null) {
        this.$notify({
          title: '警告',
          message: '请选择车辆类型!',
          type: 'warning'
        });
        return;
      }

      if (this.addTruckData.licensePlate == "" || this.addTruckData.licensePlate == null) {
        this.$notify({
          title: '警告',
          message: '请输入车牌!',
          type: 'warning'
        });
        return;
      }
      if (this.addTruckData.fleetId == "" || this.addTruckData.fleetId == null) {
        this.$notify({
          title: '警告',
          message: '请选择车辆所属车队!',
          type: 'warning'
        });
        return;
      }
      method.insTruck(this.addTruckData).then(({data}) => {


        if (data.code == 200) {
          this.$notify({
            title: '成功',
            message: '车辆添加成功!',
            type: 'success'
          });

          this.dialogVisible = false
          this.findPageTruck()
        }
      })

    },
    //  查看车辆详情
    findDetails(val) {

      this.$router.push({path: 'truckDetails', query: {id: val.id, operate: "truck"}})
    },
    //  删除车辆
    remTruck(val) {

      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        method.delTruck(val.id).then(({data}) => {
          if (data.code == 200) {
            this.$notify({
              title: '成功',
              message: '车辆删除成功!',
              type: 'success'
            });
            this.findPageTruck()
          }
          if (data.code == 203) {
            this.$message.error('您的权限不够!');
            return
          }
          if (data.code == 201) {

            this.$notify({
              title: '警告',
              message: data.message,
              type: 'warning'
            })
            return
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //  取消添加对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    }
  },
  created() {

    this.findPageTruck()
    this.findTruckTypeAll()
    this.findFleetAll()
  }

}
</script>
